<template>
  <div
    class="index overauto flex justify-center"
    style="width: 100vw; height: 100vh; overflow-x: hidden"
  >
    <div class="content">
      <div
        class="top-title text-[18PX] text-[#fff] bg-[#333] w-[100%] flex items-center px-[18PX] items-center py-[13PX] relative pl-[40PX] relative"
      >
        <div class="py-[18PX] h-[100%] absolute top-[0PX] left-[18PX] bar">
          <div class="h-[100%] bg-[#FF8800] mr-[5PX]"> </div>
        </div>

        {{ product.titleExternal }}
      </div>
     
      <div class="swiper relative">
        <el-carousel :autoplay="true">
          <el-carousel-item v-for="(item, index) in product.picture?.split(',')" :key="index">
            <div class="swiper-item bg" :style="`background-image: url(${item})`"> </div>
          </el-carousel-item>
        </el-carousel>
        <!-- 倒計時 -->
        <!-- <div
          class="w-[100%] benefit bg flex items-center px-[18PX] justify-between"
          v-if="product.countdown"
          style="
            background-image: url(https://img.alicdn.com/imgextra/i2/801089336/O1CN01JgZMVC2IpwkOVkeDq_!!801089336.png);
            background-position: right top;
          "
        >
          <div style="gap: 10PX" class="flex text-[#fff] items-center">
            <div class="text-[#fff]">Ribotą laiką įsigyti</div>
            |
            <div class="qianggou-num bg-[#fff] rounded-[24PX] text-[#FD4442]">
              Prekybos kiekis：{{ product.saleCount || 0 }}
            </div>
          </div>

          <div style="gap: 5PX" class="flex items-center time">
            <div class="text-[#FD4442]">Atstumo pabaiga：</div>

            <div class="cycle flex-center text-[#fff]"> 00 </div>

            <div class="text-[#FD4442]"> : </div>

            <div class="cycle flex-center text-[#fff]"> 00 </div>

            <div class="text-[#FD4442]"> : </div>

            <div class="cycle flex-center text-[#fff]"> 00 </div>
          </div>
        </div> -->
        <div class="px-[18PX] py-[18PX] flex justify-between items-center">
          <div class="flex items-end pricebox">
            <div class="text-[#FF0C06] mr-[10PX] flex items-end">
              <div class="symbol text-[#333]">{{ areaInfo.currencySymbol }}</div>
              <div class="price ml-[4PX] text-[#333] font-bold">{{
                product.originalPrice || 0
              }}</div>
            </div>
            <div class="bg-[#333] rounded-[6PX] px-[10PX] py-[4PX] text-[#BEE521]">
              扣后價：{{ areaInfo.currencySymbol }} {{ product.discountedPrice || 0 }}
            </div>
          </div>
          <div class="disbox">
            <div class="text-[20PX] font-bold text-right text-[#333]">
              {{ (((product.originalPrice - product.discountedPrice)  / product.originalPrice) * 100).toFixed(0) }}%OFF</div
            >
            <div class="flex items-center">
              <div class="text-[#999]">限時優惠</div>
              <img :src="TimePng" class="w-[18PX] h-[18PX] ml-[4PX]" />
            </div>
          </div>
        </div>
        <div class="flex items-center flex-wrap px-[18PX] tagbox">
          <div
            class="text-[#A56400] text-[12PX] flex items-center rounded-[2PX] px-[6PX] py-[4PX] mr-[10PX] tag"
            style="background: rgba(255, 154, 0, 0.19)"
          >
            <img
              src="../../../assets/template/template2/protect.png"
              class="w-[14PX] h-[14PX] mr-[2PX]"
            />
            商家保障
          </div>
          <div class="text-[12PX]">品牌直銷·</div>
          <div class="text-[12PX]">品質保障·</div>
          <div class="text-[12PX]">7天無理由退款</div>
        </div>

        <div class="top-title mt-[15PX] px-[18PX]">
          {{ product.titleExternal }}
        </div>

        <div class="subTitle text-[#999999] mt-[15PX] px-[18PX]">
          {{ product.subtitle }}
        </div>

        <div class="lint mt-[15PX]" style="border-top: dashed 1PX #f5f5f5"> </div>

        <div class="coupon bg mt-[15PX] flex items-center justify-between px-[18px]"
             style="background-image: url(https://img.alicdn.com/imgextra/i3/801089336/O1CN018OYOCV2IpwkNUBJ3S_!!801089336.png);background-position: top left;">
          <div>
            无门槛优惠券·预计省下 <span class="text-[#FF0C06]">{{
              areaInfo.currencySymbol
            }}{{ product.couponAmount }}</span>
          </div>

          <div class="px-[12PX] py-[6PX] rounded-[60PX] cursor-pointer text-[#FDB03A]"
               style="border: solid 1px #FDB03A" @click="handleBtnClick({ type:'pickupCoupon' })">
            {{ isPickup ? '已领取' : '立即领取' }}
          </div>

        </div>

        <div class="mt-[15PX] selectInfo px-[18PX]">
          <div class="flex justify-between items-center info">
            <div class="text-[#333] text-[12PX] left">选择：规格,数量</div>
            <div class="right">
              <Icon icon="ep:arrow-right" size="12" color="#333" />
            </div>
          </div>
        </div>
        <div class="px-[18PX] flex flex-wrap mt-[15PX] typelist">
          <div class="cursor-pointer items" v-for="(item, index) in originalSku" :key="index">
            <div
              class="w-[68PX] h-[68PX] flex justify-center items-center rounded-[6PX] mr-[10PX] relative"
              :class="index == 0 ? 'bg-[#F3F7F8]' : ''"
            >
              <div class="w-[46PX] h-[46PX]">
                <img
                  :src="item.picture"
                  class="w-full h-full object-fit-contain"
                  :alt="item?.propertyValue"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="gap w-[100%] h-[10PX] bg-[#F5F5F5] my-[15PX]"> </div>

        <div class="detailPart">
          <div class="py-[15PX]" v-html="product.detail"> </div>
        </div>

        <!-- <div class="gap w-[100%] h-[10PX] bg-[#F5F5F5] my-[15PX]"> </div> -->

        <div class="flex items-center flex-wrap rounded-[6PX] bg-[#333] px-[5PX] py-[8PX] tagbox">
          <div
            class="text-[#fff] text-[12PX] flex items-center rounded-[2PX] px-[6PX] py-[4PX] mr-[10PX] tag"
          >
            <img
              src="../../../assets/template/template2/protect_w.png"
              class="w-[14PX] h-[14PX] mr-[2PX]"
            />
            商家保障
          </div>
          <div class="text-[12PX] text-[#fff]">品牌直銷·</div>
          <div class="text-[12PX] text-[#fff]">品質保障·</div>
          <div class="text-[12PX] text-[#fff]">7天無理由退款</div>
        </div>

        <div class="detailPart">
          <div class="px-[18PX]">
            <div class="sku mt-[20PX]" v-for="(item, index) in skuList" :key="index">
              <div>{{ item.nameForeign }}{{ item.list ? `(${item.list.length})` : '' }}</div>
              <el-scrollbar>
                <div class="list flex mt-[15PX]">
                  <div
                    v-for="(it, idx) in item.list"
                    :key="idx"
                    @click="handleBtnClick({ type: 'sku', index, idx, item, it })"
                  >
                    <div
                      class="w-[158PX] h-[195PX] rounded-[12PX] mr-[18PX] overflow-hidden transition"
                      :class="`${idx + 1 == item.selected ? ' bg-[#FCFFF3]' : 'bg-[#F6F6F6]'}`"
                      :style="`${idx + 1 == item.selected ? 'border:1PX solid #BEE521' : 'border:1PX solid transparent'}`"
                    >
                      <div class="w-[158PX] h-[158PX]" style="border-radius: 12PX 12PX 0 0">
                        <img
                          :src="it.img"
                          alt=""
                          class="w-full h-full"
                          style="border-radius: 12PX 12PX 0 0"
                        />
                      </div>

                      <div
                        class="mt-[6PX] flex-center"
                        :class="`${idx + 1 == item.selected ? 'text-[#BEE521]' : 'text-[#333]'}`"
                      >
                        {{ it.nameForeign }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
            </div>

            <div class="sku flex items-center mt-[20PX]">
              <div>數量</div>
              <div class="ml-[10PX]">
                <el-input-number :min="1" v-model="form.number" />
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="gap w-[100%] h-[10PX] bg-[#F5F5F5] my-[15PX]"> </div> -->

        <div class="lint mt-[22PX]" style="border-top: solid 1PX #f5f5f5" v-if="isAllPropertySelected()?.selectedItem.propertyValue"> </div>

        <div class="px-[18PX]  mt-[22PX]" v-if="isAllPropertySelected()?.selectedItem.propertyValue">
          <div> 價格明細 </div>
          <div class="mt-[15PX] w-full table">
            <div class="flex w-full items-center bg-[#333] head" style="border-radius: 6PX 6PX 0 0">
              <div
                class="text-[#BEE521] text-center py-[5PX] items"
                style="flex: 0 0 22.85%; border-right: 1PX solid #f5f5f5"
              >
                圖片
              </div>
              <div
                class="text-[#BEE521] text-center py-[5PX] items"
                style="flex: 0 0 57.15%; border-right: 1PX solid #f5f5f5"
              >
                規格
              </div>
              <div class="text-[#BEE521] text-center items" style="flex: 0 0 20%">數量</div>
            </div>
            <div class="w-full flex items-center listBorder list">
              <div
                class="text-center py-[5PX] items"
                style="flex: 0 0 22.85%; border-right: 1PX solid #f5f5f5"
              >
                <img
                  class="w-[58PX] h-[58PX] rounded-[6PX]"
                  :src="isAllPropertySelected()?.selectedItem.picture"
                  alt=""
                />
              </div>
              <div
                class="text-center h-[58PX] flex items-center justify-center py-[5PX] items"
                style="flex: 0 0 57.15%; border-right: 1PX solid #f5f5f5"
              >
                {{ isAllPropertySelected()?.selectedItem.propertyValueForeign }}
              </div>
              <div
                class="text-center h-[58PX] flex items-center justify-center py-[5PX] items"
                style="flex: 0 0 20%"
                >{{ form.number }}</div
              >
            </div>
          </div>
          <div class="py-[12PX] pr-[18PX] text-right bg-[#fafafa]" style="border-radius: 0 0 6PX 6PX">
            <div class="flex justify-between items-end">
              <div></div>
              <div class="flex items-end">
                <div class="mr-[5PX]">
                  數量：<span class="font-bold text-[18PX]"> {{ form.number }} </span>,
                </div>
                <div class="mr-[5PX]">
                  價格：<span
                    class="font-bold text-[18PX]"
                    :class="computePrice.discountPrice ? 'line-through' : ''"
                    >{{ areaInfo.currencySymbol }}{{ computePrice.price }}</span
                  >
                </div>
                <!-- <div class="font-bold text-[20PX] mb-[-5PX]">{{ computePrice.price }}</div> -->
              </div>
            </div>
            <!-- 运费 -->
            <div class="flex justify-between mt-[10PX] items-end">
              <div></div>
              <div class="flex items-end">
                <div class="mr-[5PX]">
                  運費：<span class="font-bold text-[18PX]"
                    >{{ areaInfo.currencySymbol }}{{ product.shippingFee || '0.00' }}</span
                  >
                </div>
                <!-- <div class="font-bold text-[20PX] mb-[-5PX]">{{ computePrice.price }}</div> -->
              </div>
            </div>
            <!-- 手续费 -->
            <div class="flex justify-between mt-[10PX] items-end" v-if="product.commission">
              <div></div>
              <div class="flex items-end">
                <div class="mr-[5PX]">
                  手续费：<span class="font-bold text-[18PX]"
                    >{{ areaInfo.currencySymbol }}{{ product.commission || '0.00' }}</span
                  >
                </div>
                <!-- <div class="font-bold text-[20PX] mb-[-5PX]">{{ computePrice.price }}</div> -->
              </div>
            </div>
            <!-- 偏遠地區郵费 -->
            <div class="flex justify-between mt-[10PX] items-end" v-if="product.remotePostage && isRemote">
              <div></div>
              <div class="flex items-end">
                <div class="mr-[5PX]">
                  偏遠地區郵费：<span class="font-bold text-[18PX]"
                    >{{ areaInfo.currencySymbol }}{{ product.remotePostage || '0.00' }}</span
                  >
                </div>
                <!-- <div class="font-bold text-[20PX] mb-[-5PX]">{{ computePrice.price }}</div> -->
              </div>
            </div>
          

            <div class="flex justify-between items-end mt-[10PX]" v-if="computePrice.discountPrice">
              <div></div>
              <div class="flex items-end">
                <div class="mr-[5PX]">總價：</div>
                <div class="font-bold text-[20PX] mb-[-5PX]"
                  >{{ areaInfo.currencySymbol }}{{ computePrice.discountPrice }}</div
                >
              </div>
            </div>
            <div class="flex justify-between items-end mt-[10PX]" v-else>
              <div></div>
              <div class="flex text-[#FF0C06] items-end">
                <div class="text-[#FF0C06] mr-[5PX]">總價：</div>
                <div class="font-bold text-[20PX] text-[#FF0C06] mb-[-5PX]"
                  >{{ areaInfo.currencySymbol }}{{ computePrice.price }}</div
                >
              </div>
            </div>
          </div>
        </div>

        <div class="lint mt-[15PX]" style="border-top: solid 1PX #f5f5f5"> </div>

        <!-- <div class="px-[18PX] mt-[30PX]">
          <div class="flex">
            <div class="text-[#FF0C06]">*</div>
            物流方式
          </div>

          <div class="mt-[15PX] flex items-center flex-wrap overauto w-[100%]">
            <div
              v-for="(item, index) in logisticsList"
              :key="index"
              @click="handleBtnClick({ type: 'logistics', index })"
            >
              <div
                class="w-[190PX] h-[72PX] bg mb-[10PX] mr-[10PX] transition"
                :style="`background-image:url(${index == form.activeLogistics ? 'https://img.alicdn.com/imgextra/i1/801089336/O1CN01D42yhk2IpwkNddK1S_!!801089336.png' : 'https://img.alicdn.com/imgextra/i3/801089336/O1CN01JcP79p2IpwkO5pPNf_!!801089336.png'})`"
              >
                <div class="pl-[40PX] pt-[15PX] flex items-center">
                  <div
                    class="w-[18PX] h-[18PX] bg mr-[5PX]"
                    :style="`background-image:url(${item.logo})`"
                  ></div>
                  <div class="text-[16PX]">
                    {{ item.methodName }}
                  </div>
                </div>

                <div class="mt-[10PX] text-[#999999] pl-[40PX]">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>

          <div
            class="mt-[15PX] bg-[#FFF8EE] px-[20PX] py-[20PX] rounded-[8PX] text-[#8D5B0E] flex items-center"
            style="border: solid 1PX rgba(141, 91, 14, 0.2)"
          >
            <div
              class="w-[15PX] h-[15PX] bg mr-[10PX]"
              style="
                background-image: url(https://img.alicdn.com/imgextra/i2/801089336/O1CN01FXSiiT2IpwkHYqnkr_!!801089336.png);
              "
            ></div>

            温馨提示：外岛需加运费（澎湖列岛、金门、妈祖、连江、彭佳屿等）
          </div>
        </div>

        <div class="lint mt-[15PX]" style="border-top: dashed 1PX #f5f5f5"> </div> -->
        <div class=" mt-[15PX] px-[18PX] ">
          <div class="bg-[#fafafa] rounded-[6PX] py-[20PX]">
            <el-form
            :model="form"
            :rules="rules"
            ref="formRef"
            :label-width="screenWidth>800?'90PX':'70PX'"
            label-position="left"
          >
          <el-row :gutter="24" class="px-[18PX]">
            <el-col
                :xs="24"
                :xl="24"
                :lg="24"
              >
              <el-form-item label="付款方式" style="display: flex;align-items: center;" prop="customerName">
                <template #label>
                        <div class="text-[#000]"> 付款方式</div>
                      </template>
                <div class=" flex items-center">
                  <div class="flex px-[18PX] py-[23PX] bg-[#fff] borderLine items-center">
                    <img
                      class="w-[18PX] h-[18PX] mr-[5PX]"
                      src="../../../assets/template/template2/wallet.png"
                      alt=""
                    />
                    <div class="leading-[14PX]">貨到付款</div>
                    <img
                      class="w-[14PX] h-[14PX] ml-[5PX]"
                      src="../../../assets/template/template2/select.png"
                      alt=""
                    />
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
            
            <el-row :gutter="24" class="px-[18PX]">
              <el-col
                :xs="item.xs"
                :xl="item.xl"
                :lg="item.xl"
                v-for="(item, index) in inputConfig"
                :key="index"
              >
                <el-form-item
                  :prop="item.code"
                  v-if="
                    ((item.directly && logisticsList[form.activeLogistics]?.directlyStatus == 0) ||
                    !item.directly
                      ? true
                      : false) && item.show
                  "
                   style="display: flex;align-items: center;" 
                >
                  <template #label>
                    <div class="text-[#000]">{{ item.name }}</div>
                  </template>
                  <el-input
                    v-model="form[item.code]"
                    :placeholder="item.name"
                    :min="0"
                    v-if="!item.type || item.type == 'text'"
                    :disabled="
                      item.code == 'detailAddress'
                        ? logisticsList[form.activeLogistics]?.directlyStatus == 0
                          ? true
                          : false
                        : false
                    "
                  />
                  <el-select
                    v-model="form[item.code]"
                    :placeholder="item.name"
                    v-if="item.type == 'select'"
                    @change="onChange(item.code)"
                  >
                    <el-option
                      v-for="(it, idx) in item.list"
                      :key="idx"
                      :value="it[item.value]"
                      :label="it[item.label]"
                    />
                  </el-select>

                  <el-input
                    :placeholder="item.name"
                    v-model="form[item.code]"
                    v-if="item.type == 'textarea'"
                    type="textarea"
                    :rows="5"
                    resize="none"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          </div>
        </div>

        <div class="lint mt-[15PX]" style="border-top: solid 1PX #f5f5f5"> </div>

        <div class="px-[18PX] mt-[30PX]">
          <div class="text-center text-[#f00]"> 填寫完成后,請點擊按鈕提交! </div>
        </div>

        <div
          class="w-[100%] h-[30PX] flex-center bg-[#333] text-[#FFF] mt-[15PX]"
          @click="handleBtnClick({ type: 'submit' })"
          >
          <img
            class="w-[14PX] h-[14PX] mr-[5PX]"
            src="../../../assets/template/template2/shoppingCar.png"
            alt=""
          />
          立即搶購
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useMessage } from '@/hooks/web/useMessage'
import TimePng from '@/assets/template/template2/time.png'

const screenWidth = ref(window.innerWidth)

const message = useMessage()
const props = defineProps({
  product: {
    type: Object,
    required: false,
    default: () => {}
  },
  areaInfo: {
    type: Object,
    required: false,
    default: () => {}
  },
  skuInfo: {
    type: Array,
    required: false,
    default: () => []
  },
  hasProvince:{
    type: Boolean,
    default:true,
  },
  //原商品列表sku
  originalSku: {
    type: Array,
    required: false,
    default: () => []
  },
  provinceList: {
    type: Array,
    required: false,
    default: () => []
  },
  logisticsList: {
    type: Array,
    required: false,
    default: () => []
  },
  storeList: {
    type: Array,
    required: false,
    default: () => []
  },
  globalConfig: {
    type: Object,
    required: false,
    default: () => {}
  },
  remoteList:{
    //偏远地区列表
    type: Array,
    default: () => []
  }
})

const formRef = ref(null)

const isRemote = ref(false)

const emit = defineEmits(['confirm', 'execute'])

const isPickup = ref(false)

const config = ref([
  {
    name: '免运费'
  },
  {
    name: '货到付款'
  },
  {
    name: '15天鉴赏期'
  },
  {
    name: '正品保证'
  }
])

const skuList = ref([])

const initConfig =ref(
  [
  {
    name: '姓名',
    code: 'customerName',
    xs: 24,
    xl: 24,
    required: true,
    show:true,
  },
  {
    name: '聯繫電話',
    code: 'customerPhone',
    xs: 24,
    xl: 24,
    required: true,
    show:true,
  },
  {
    name: "地區",
    code: "areaName",
    type: "select",
    label: "name",
    value: "value",
    xs: 24,
    xl: 8,
    required: true,
    show:true,
    list:[
      {
        name: props.product.areaName,
        value: props.product.areaName
      }
    ]
  },
  {
    name: '一級區域',
    code: 'cityName',
    type: 'select',
    label: 'name',
    value: 'name',
    xs: 24,
    xl: 8,
    required: true,
    show:props.hasProvince,
  },
  {
    name: '二級區域',
    code: 'regionName',
    type: 'select',
    label: 'name',
    value: 'name',
    xs: 24,
    xl: 8,
    required: true,
    show:props.hasProvince,
  },
  // {
  //   name: '區',
  //   code: 'regionName',
  //   type: 'select',
  //   label: 'name',
  //   value: 'id',
  //   xs: 24,
  //   xl: 8,
  //   required: true,
  //   show:props.hasProvince,
  // },
  // {
  //   name: '选择门店',
  //   code: 'addressId',
  //   type: 'select',
  //   label: 'name',
  //   value: 'id',
  //   xs: 24,
  //   xl: 24,
  //   required: false,
  //   directly: true
  // },
  {
    name: '詳細地址',
    code: 'detailAddress',
    xs: 24,
    xl: 24,
    required: true,
    show:true,
  },
  {
    name: '備註',
    code: 'message',
    type: 'textarea',
    xs: 24,
    xl: 24,
    required: false,
    show:true,
  }
]
)

const inputConfig = ref([...initConfig.value])

const computePrice = computed(() => {
  console.log('计算价格', props.areaInfo)
  //获取sku列表
  //查看是否全部选中
  let isAllSelected = isAllPropertySelected().isAllSelected

  if (isAllSelected) {
    let selectedItem = isAllPropertySelected().selectedItem

    let discountPrice = (selectedItem.discountedPrice || 0) * form.value.number
    if (isPickup.value) {
      discountPrice -= props.product.couponAmount || 0
    }
    return {
      price: ((selectedItem.price || 0) * form.value.number).toFixed(2),
      discountPrice: isRemote.value? (discountPrice + props.product.shippingFee+props.product.commission+props.product.remotePostage).toFixed(2) :(discountPrice + props.product.shippingFee+props.product.commission).toFixed(2) ,
      lessPrice: isPickup.value? (selectedItem.originalPrice || 0) * form.value.number - (selectedItem.discountedPrice || 0) * form.value.number  : (selectedItem.originalPrice || 0) * form.value.number - (selectedItem.discountedPrice || 0) * form.value.number 
      // discountPrice:(discountPrice + props.product.shippingFee+props.product.commission+props.product.remotePostage).toFixed(2),
      // lessPrice:
      //   (selectedItem.originalPrice || 0) * form.value.number -
      //   (selectedItem.discountedPrice || 0) * form.value.number
    }
  } else {
    //原价为商品价格

    let discountPrice = (props.product.discountedPrice || 0) * form.value.number
    if (isPickup.value) {
      discountPrice -= props.product.couponAmount || 0
    }

    return {
      price: ((props.product.originalPrice || 0) * form.value.number).toFixed(2),
      discountPrice:isRemote.value?  (discountPrice + props.product.shippingFee+props.product.commission+props.product.remotePostage).toFixed(2):(discountPrice + props.product.shippingFee+props.product.commission).toFixed(2),
      lessPrice: isPickup.value? (props.product.originalPrice || 0) * form.value.number - (props.product.discountedPrice || 0) * form.value.number  :(props.product.originalPrice || 0) * form.value.number - (props.product.discountedPrice || 0) * form.value.number
      // discountPrice:(discountPrice + props.product.shippingFee+props.product.commission+props.product.remotePostage).toFixed(2),
      // lessPrice:
      //   (props.product.originalPrice || 0) * form.value.number -
      //   (props.product.discountedPrice || 0) * form.value.number
    }
  }
})

/**
 * 计算rules
 * */
const rules = computed(() => {
  let obj = {}
  inputConfig.value.forEach((item) => {
    if (item.required) {
      obj[item.code] = [
        {
          required: true,
          message: `請${item.type == 'select' ? '選擇' : '輸入'}${item.name}`,
          trigger: `${item.type == 'select' ? 'change' : 'blur'}`
        }
      ]
    }
  })

  console.log(obj, '===')
  return obj
})

let initForm = {
  number: 1,
  activeLogistics: 0
}

const form = ref({
  ...initForm
})

const handleBtnClick = (e) => {
  let type = e.type
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const isAllPropertySelected = () => {
  let isAllSelected = true
  let selectedItem = {}

  if (skuList.value.length > 0) {
    for (let i = 0; i < skuList.value.length; i++) {
      let item = skuList.value[i]
      if (!item.selected) {
        isAllSelected = false
        break
      }
    }

    if (isAllSelected) {
      //获取选中的sku
      let str = skuList.value
        .map((item) => {
          //获取选中的list
          let list = item.list
          let it = list[item.selected - 1]
          return it.name
        })
        .join('§')

      selectedItem = props.originalSku.find((at) => {
        return at.propertyValue == str
      })
    }
  }

  return {
    selectedItem,
    isAllSelected
  }
}

const fn = {
  pickupCoupon() {
    if (!isPickup.value) {
      isPickup.value = true
      message.success('领取成功')
    }
  },
  async submit() {
    try {
      let res = await formRef.value.validate()

      let item = inputConfig.value.find((item) => {
        return item.code == 'regionName'
      })

      //查看有没有v选择sku
      if (isAllPropertySelected().isAllSelected) {
        let addressItem = inputConfig.value.find((at) => {
          return at.code == 'addressId'
        })

        console.log(addressItem, '=====')

        let address = null
        if (addressItem) {
          let lis = addressItem.list

          console.log(lis, '==============')

          if (form.value.addressId) {
            address = lis.find((at) => {
              return at.id == form.value.addressId
            })?.name
          }
        }

        emit('execute', {
          type: 'confirm',
          form: form.value,
          address: address,
          skuList: skuList.value,
          priceInfo: computePrice.value,
          isPickup: isPickup.value,
          regionList: item.list,
          regionName1: item.list.find((at) => at.id == form.value.regionName)?.name,
          selectedProperty: isAllPropertySelected().selectedItem,
          success() {
            if (props.globalConfig.orderDelectSteat == 1) {
              form.value = {
                ...initForm
              }
            }
          }
          //其他 sku等信息
        })
      } else {
        message.error('请选择sku')
      }
    } catch (e) {
      console.log(e)
      for (let i in e) {
        message.error(e[i][0].message)
        return
      }
    }
  },
  logistics({ index }) {
    form.value.activeLogistics = index
  },
  sku({ item, it, index, idx }) {
    item.selected = idx + 1
  }
}

const onChange = (code) => {
  if (code == 'areaName') {
    form.value.cityName = ''
    form.value.regionName = ''
    //生成
    let item = inputConfig.value.find((at) => {
      return at.code == 'cityName'
    })
    //获取市
    let it = props.provinceList.find((at) => {
      return at.name == form.value[code]
    })

    if (item) {
      item.list = it?.list || [];
    }

    item = inputConfig.value.find((at) => {
      return at.code == 'regionName'
    })

    if (item) {
      item.list = [];
    }

    item = inputConfig.value.find((at) => {
      return at.code == 'addressId'
    })

    if (item) {
      item.list = [];
    }
  } else if (code == 'cityName') {
    form.value.regionName = ''

    let item = inputConfig.value.find((at) => {
      return at.code == 'regionName'
    })

    let item1 = inputConfig.value.find((at) => {
      return at.code == 'cityName'
    })

    let it = item1.list.find((at) => {
      return at.name == form.value.cityName
    })
    if (item) {
      item.list = it.list
    }
    item = inputConfig.value.find((at) => {
      return at.code == 'addressId'
    })
    if (item) {
      item.list = []
    }
  } else if (code == 'regionName') {
  } else if (code == 'addressId') {
    let it = props.storeList.find((at) => {
      return at.id == form.value[code]
    })

    form.value.detailAddress = it.detailedAddress
  }
}

watch(
  () => props.provinceList,
  () => {
    let item = inputConfig.value.find((at) => {
      return at.code == 'areaName'
    })
    item.list = props.provinceList
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => [form.value.activeLogistics, form.value.regionName],
  () => {
    if (form.value.regionName) {
      isRemote.value = props.remoteList.find(at => {
        return at.city == form.value.regionName
      })
      if (props.logisticsList[form.value.activeLogistics]?.directlyStatus == 0) {
        //获取store
        emit('execute', {
          type: 'store',
          data: form.value,
          callback(storeList) {
            let item = inputConfig.value.find((at) => {
              return at.code == 'addressId'
            })
            item.list = storeList.map((item) => {
              return {
                id: item.id,
                name: item.storeName,
                address: item.detailedAddress
              }
            })
          }
        })
      }
    }
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => props.skuInfo,
  () => {
    skuList.value = props.skuInfo

    console.log(skuList.value, 'skuList.valueskuList.valueskuList.value')
  },
  {
    deep: true,
    immediate: true
  }
)

/**
 * 处理规格中的图片显示，有可能会存在多张规格图片
 */
const handleTypeImages = (item) => {
  const imgs = item.split(',')
  return imgs[0]
}
const handleResize = () => {
  screenWidth.value = window.innerWidth;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
  nextTick(() => {
    initConfig.value.map((item) => {
      if(item.code === 'areaName'){
        item.list = [
          {
            name: props.product.areaName,
            value: props.product.areaName
          }
        ]
      }
    })
  })
});

// 在组件卸载时移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});


</script>
<style></style>
<style scoped lang="less">
@import '@/common';

img {
  vertical-align: middle;
}

.index {
  .content {
    width: 640PX;
    height: 100%;

    .top-title {
      font-size: 14PX !important;

      .bar {
        width: 4PX;
      }
    }

    .subTitle {
      font-size: 10PX !important;
    }

    .swiper {
      width: 100%;
      height: 640PX;

      .swiper-item {
        width: 100%;
        height: 640PX;
      }

      .benefit {
        width: 100%;
        height: 64PX;

        .qianggou-num {
          padding: 5PX 12PX;
        }
      }

      .cycle {
        width: 27PX;
        height: 27PX;
        border-radius: 5PX;
        background: #fd4442;
      }
    }

    .price {
      font-size: 30PX;
      margin-bottom: -5PX;
    }

    .coupon {
      width: 100%;
      height: 45PX;
      padding-left: 60PX;
    }

    .icons {
      width: 14PX;
      height: 14PX;
    }
  }

  .ft12 {
    font-size: 12PX !important;
  }
}

@media screen and (max-width: 640PX) {
  .index {
    .content {
      width: 100%;

      .swiper {
        width: 100vw;
        height: 100vw;

        .swiper-item {
          width: 100vw;
          height: 100vw;
        }
      }
    }

    .ft12 {
      .font(18);
    }
  }
}

:deep(.el-carousel) {
  width: 100%;
  height: 100%;

  .el-carousel__container {
    width: 100%;
    height: 100%;
  }
}

:deep(.el-input-number) {
  width: 135PX;
  height: 30PX;

  .el-input-number__decrease, .el-input-number__increase {
    width: 28PX;
    height: 28PX;
    border-radius: 0PX;
  }

  .el-input__inner, .el-input__wrapper {
    height: 30PX !important;
  }

  .el-icon {
    font-size: 14PX;
  }

}

:deep(.el-input) {
  height: 30PX;

  .el-input__inner, .el-input__wrapper {
    height: 30PX !important;
    border-radius: 5PX;
  }


}

:deep(.el-textarea ) {
  height: 60PX !important;

  .el-textarea__inner {
    height: 60PX !important;
    font-size: 10PX;
    border-radius: 4PX !important;
    padding: 4PX 10PX;
  }

}


:deep(.el-select) {
  height: 30PX !important;

  .el-select__selected-item, .el-input__inner, .el-select__wrapper {
    height: 30PX !important;


  }

  .el-select__placeholder {
    display: flex !important;
    align-content: center;
    align-items: center;
  }

}

:deep(.el-form-item) {
  margin-bottom: 0PX;
  margin-top: 15PX;
}

:deep(.el-form-item) {
  margin-bottom: 0PX;
  margin-top: 15PX;
}
.borderLine {
  border: 1PX solid #ddd;
  border-radius: 8PX;
}
:deep(.el-carousel__arrow){
  width: 20PX;
  height: 20PX;
  .el-icon{
    font-size: 14PX;
  }
}
:deep(.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before){
  font-size: 12PX;
}
:deep(.el-input__wrapper){
  padding: 0PX 10PX;
  box-shadow: none;
  border:1PX solid #e5e5e5;
  border-radius: 4PX !important;
  outline: unset;
}
:deep(.el-select__wrapper){
  padding: 0 10PX;
}

</style>
